<template lang="pug">
view.input-view
  image.search-icon(src="/static/img/index/ic_homepage_search@2x.png")
  input.input(
    confirm-type="search",
    @confirm="confirm",
    :value="value",
    @focus="colseSearchRwsult",
    :focus="setFocus",
    @input="clearInput",
    :type="inputType",
    :placeholder="placeholderValue",
    @blur="inputBlur"
  )
  view(style='width: 32rpx')
    view.uni-icon.uni-icon-clear(v-if="showClearIcon", @click="clearIcon")
</template>

<script>
export default {
  props: {
    value: String,
    setFocus: Boolean,
    placeholderValue: {
      type: String,
      default: "输入搜索关键词",
    },
    inputType: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      showClearIcon: false,
    };
  },
  methods: {
    confirm() {
      this.$emit("confirm");
    },
    clearIcon() {
      this.showClearIcon = false;
      this.$emit("input", "");
      this.$emit("clear")
    },
    colseSearchRwsult(e) {
      this.$emit("focus");
    },
    clearInput(e) {
      const value = e.target.value;
      this.showClearIcon = value;
      this.$emit("input", e.target.value);
    },
    inputBlur() {
      this.$emit("blur");
    },
  },
};
</script>

<style lang="scss" scoped>
.input-view {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f6f6f6;
  //height: 60rpx;
  border-radius: 30rpx;
  padding: 0 4%;
  //line-height: 60rpx;
}

.input-view .input {
  // height: 60rpx;
  //line-height: 60rpx;
  width: 94%;
  padding: 4rpx 3%;
  // font-size: 24rpx;
  margin: auto 0;
  /* color: #999999; */
}

.search-icon {
  width: 36rpx;
  height: 36rpx;
  margin: 12rpx 0;
}

.uni-icon-clear {
  height: 38rpx;
  font-size: 40rpx;
}
</style>